<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<title>我的接口</title>
		<link rel="stylesheet" type="text/css" href="css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/modules/laydate/default/laydate.css"/>
		<link rel="stylesheet" href="css/qipao.css">
		<link rel="stylesheet" type="text/css" href="css/tanchuang.css"/>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui.all.js"></script>
		<script src="./lay/modules/jquery.js"></script>
		<script src="lay/modules/laydate.js" type="text/javascript" charset="utf-8"></script>
		
		<style>
			*{
			        padding: 0;
			        margin: 0;
			    }
			    html,body{
			        height: 100%;
					background-color: #f9f9f9;
			    }
			    .wrap{
			        width: 160px;
			        height: 600px;
			        background-color: #ffffff;
					position: absolute;
					left: 353px;
					top: 90px;
			    }
				
			    .wrapper {position: relative;}
			    #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
			    .nav{
			        width:160px;
			        margin: 18px 0 0 353px;
					position: absolute;
					
			    }
			    .list{
					margin-bottom: 5px;
			    }
			    .list h2{
			        position: relative;
			        padding: 20px 20px 30px 16px;
			        background-color: #ffffff;
			        font-size: 18px;
			        color: #333;
			        transition: .5s;
			    }
			    .list h2.on{
			        background-color: #ffffff;
			    }
			    .list i{
					
			        position: absolute;
					margin-left: 120px;
			        border: 8px solid transparent;
			        border-left-color: #333;/*triangle*/
			        transform:rotate(270deg);
			        transform-origin: 1px 8px;
			        transition: .5s;
			    }
			    .list i.on{
			        transform:rotate(90deg);
			    }
			    .hide{
			        overflow: hidden;
			        height: 0;
			        transition: .5s;
			    }
			    .hide h5{
			        padding: 0;
			        background-color: #ffffff;
			        color:#333;
			        border-bottom:#42495d;
			    }
				
			#footer{
				background-color: #0347a8;
				color: #f9f9f9;
				clear: both;
				text-align: center;
				padding: 5px;
				height: 50px;
				font:12px PingFangSC-Regular, sans-serif;	
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				width: 100%;
			}
			.type{
				 background:linear-gradient(#214fb2,#1975d4);
				 height: 72px;
				 width: 100%;
			}
			.name:link,.name:visited{
				display: block;
				color: #333333;
				font-size: 14px;
				background-color: #ffffff;
				width: 160px;
				height: 40px;
				padding: 4px;
				
			}
			.name:hover,.name:active{
				background-color: #dbefff;
			}
			
			.essential{
				width: 1022px;
				height: 874px;
				margin: 0 auto;
				background-color: #ffffff;
				position: absolute;
				top: 90px;
				left: 533px;
				font-family: PingFangSC-Regular, sans-serif;
			}
			.length{
				width: 300px;
				height: 40px;
			}
			.custom-body-div{
				background:#FFFFFF;
				height: 100% ;
				width: 100%;
				margin-top: 9.5%;
				padding-top: 22px;
				padding-bottom: 20px;
				padding-left: 18px;
				padding-right: 18px;
				
				/* margin-left: 0.2%; position:inherit; */
			}
			/* .custom-i{
				cursor: pointer;
				font-family: iconfont !important;
				font-size: 16px;
				font-style: normal; 
				-webkit-font-smoothing: antialiased;
			} */
			.custom-div-div{
				border: 1px solid #eee; 
				float: right;
				display: inline;
				margin-left: 12px;
				width: 480px!important;
				height: 40px;
				padding-left: 10px;
				padding-right: 10px;
				
			}
			.custom-div-div2{
				margin-left: 5%;
				width: 100px;
				height: 100%; 
				float: left; 
				line-height: 2.8;
				
			}
				
			/* .custom-div-div2:hover{
				border-bottom: 2px solid #277fd2;
				color: #277fd2;
			} */
			/* .custom-div-div2:visited{
				border-bottom: 2px solid #277fd2;
				color: #277fd2;
			} */
			.custom-span-text,.custom-p-text,.custom-img-ver{
				line-height:2.5;
				font-family: PingFangSC-Regular, sans-serif;
				font-size: 14px;
			}
			.custom-text{
				font-family: PingFangSC-Regular, sans-serif;
				text-align: center;
			}
			.custom-div-act{
				position: absolute;
				z-index: 100;
				
				
			}
			.custom-img-tip:hover{
				
			}
			div::-webkit-scrollbar {
			  width: 3px;
			}
			td{
				border:2px solid #A2A39F;
				text-align: center;
				width:115px;
				height:50px;
			}
			#show{
				width: 100%; height: 100%; opacity: 1;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="myModal" class="modal">
		
			<!-- 弹窗内容 -->
			<div class="modal-content">
				<p style="padding-left: 24px; padding-top: 20px; font-size: 18px;">查看</p>
				<span class="close" onclick="show_close()">&times;</span><!--关闭符号--><br>
				<span id="interfaceName" style="margin-left: 15px;"></span>
				<table id="detail" class="layui-table" lay-even  >
				  <colgroup>
				    <col width="180">
				    <col width="150">
				    <col width="150"> <col width="150"> <col width="150"> 
				  </colgroup>
				  <thead>
				    <tr>
				      <th>申请时间</th>
					  <th>接口等级</th>
				      <th>可调用次数/天</th>
				      <th>可调用总次数</th>
					  <th>过期时间</th>
				    </tr> 
				  </thead>
				</table>
			</div>
		</div>
		<div class="layui-layout layui-layout-admin" style="position:relative;padding-bottom:60px overflow-y: scroll;">
			<div class="layui-header type">
				<ul class="layui-nav" style="position:absolute!important; left:5%; top: 3px;">
					<li class="layui-nav-item">
						<img src="./images/logo/logo.png" width="124px" height="44px" />
						<span style="font-size: 26px; position: relative; top: 7px;">|数据平台</span>
					</li>
				</ul>
				<ul class="layui-nav layui-layout-left" style="left: 60%;">

					<li class="layui-nav-item" style="top: 6px; "><a href="../xinhua/last_shouye.html">首页</a></li>
					<li class="layui-nav-item" style="top: 6px;"><a href="dataInterface.html">数据接口</a></li>
					<li class="layui-nav-item" style="top: 6px;"><a href="../xinhua/test.html">测试工具</a></li>
					<li class="layui-nav-item" style="top: 6px;">
						<a href="javascript:;">EN</a>
					</li>
					<li class="layui-nav-item" style="top: 6px;">
						<a href=""><img src="./images/headportrait.png" class="layui-nav-img"><span id="userId"></span></a>
						<dl class="layui-nav-child">
							<dd><a href="../Xinh/login.html" onclick="exit()">退出登录</a></dd>
						</dl>
					</li>
				</ul>
			</div>
			<div class="layui-side custom-background" style="margin-left: 10%;width: 10%;">
				<div class="layui-side-scroll" style=" margin-top: 28px; height: inherit">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree " style="background-color: #FFFFFF;" lay-filter="test">
						<li class="layui-nav-item layui-nav-itemed ">
							<!-- 标签待定 -->
							<a class="" href="javascript:;" style="">用户中心</a>

							<dl class="layui-nav-child">
								<dd><a href="PersonalPage.html">中心首页</a></dd>
								<dd><a href="../xinhua/last_apply.html">申请接口</a></dd>
								<dd><a href="myInterface.html">我的接口</a></dd>
								<dd><a href="../xinhua/test.html">测试工具</a></dd>
							</dl>
						</li>


					</ul>
				</div>
			</div>
		</div>
		<div id="back" class="layui-body custom-body " style="height: 100%; width: 70%;overflow-y: auto; left: 21.5%;overflow-x:visible; ">
			<div class="custom-body-div" >
				<div>
					<h3 style="font-family: PingFangSC-Regular, sans-serif;font-size: 24px;font-weight: 400;">我的接口</h3>
					<div style="margin-top: 40px; float: left;">
						<span class="custom-span-text">appKey</span>
						<ul id="bubblemenu" style="display: inline;">
							<li style=" margin-left: 24px;  margin-top: 6px; ">
								<img src="./images/help-icon.png"/>
								<div >
									系统会自动为每个登录用户分配一个32位的字符串，appKey和一个用户唯一绑定
								</div>
							</li>
						</ul>
						
						<div class="custom-div-div" style="display: inline-block;vertical-align: middle;">
							<p id="text" class="custom-p-text" style="width: 260px;display: inline-block;float: left;"><span id="appKey"></span></p>
							<div style="display: inline-block;float: left; margin-left: 120px;">
								
								<i style="width: 20px;" >
									<img src="./images/look-icon.png" style="margin-top: 13px;"/>
								</i>
								<span ><img src="./images/renovate-icon.png" style="margin-left: 8px;margin-top: 13px;"/></span>
								<textarea id="input"></textarea>
								<span onclick="copyText()"><img src="./images/copy-icon.png" style="margin-left: 8px;margin-top: 13px;cursor: pointer;"/></span>
								
							</div>
						</div>
					</div>
					<div style="margin-top: 20px; float: left;">
						<span class="custom-span-text">appSecret</span>
						<ul id="bubblemenu" style="display: inline;">
							<li style=" margin-left: 6px;  margin-top: 6px; ">
								<img src="./images/help-icon.png"/>
								<div >
									为了提供数据传输的安全性，使用appSecret做为签名的密钥，由系统自动生成32位字符串
								</div>
							</li>
						</ul>
						
						<div class="custom-div-div" style="display: inline-block;vertical-align: middle;">
							<p id="text" class="custom-p-text" style="width: 260px;display: inline-block;float: left;"><span id="appSecret"></span></p>
							<div style="display: inline-block;float: left; margin-left: 120px;">
								
								<i style="width: 20px;" >
									<img src="./images/look-icon.png" style="margin-top: 13px;"/>
								</i>
								<span ><img src="./images/renovate-icon.png" style="margin-left: 8px;margin-top: 13px;"/></span>
								<textarea id="input"></textarea>
								<span onclick="copyText()"><img src="./images/copy-icon.png" style="margin-left: 8px;margin-top: 13px;cursor: pointer;"/></span>
								
							</div>
						</div>
					</div>
					<div style="margin-top: 20px; float: left;">
						<span class="custom-span-text">AESSecret</span>
						<ul id="bubblemenu" style="display: inline;">
							<li style=" margin-left: 6px;  margin-top: 6px; ">
								<img src="./images/help-icon.png"/>
								<div >
									为了提供数据传输的安全性，所有业务参数传输都使用AES对称加密算法加密，AESSecret为加密时指定的16位密钥
								</div>
							</li>
						</ul>
						<div class="custom-div-div" style="display: inline-block;vertical-align: middle;">
							<p id="text" class="custom-p-text" style="width: 260px;display: inline-block;float: left;"><span id="AESSecret"></span></p>
							<div style="display: inline-block;float: left; margin-left: 120px;">
								
								<i style="width: 20px;" >
									<img src="./images/look-icon.png" style="margin-top: 13px;"/>
								</i>
								<span ><img src="./images/renovate-icon.png" style="margin-left: 8px;margin-top: 13px;"/></span>
								<textarea id="input"></textarea>
								<span onclick="copyText()" ><img src="./images/copy-icon.png" style="margin-left: 8px;margin-top: 13px; cursor: pointer;"/></span>
								
							</div>
						</div>
					</div>
					
				</div>
				<div style="width: 100%;height: 40px; margin-top: 15%; border-bottom: 1px solid hsla(0,0%,80%,.7);">
					<div id="first"  class="custom-div-div2 custom-text active" onclick="toMyInter()">我使用的接口</div>
					<div id="second" class="custom-div-div2 custom-text active" onclick="toApplyInter()">申请记录</div>
					<div id="third" class="custom-div-div2 custom-text active" onclick="toUseInter()">调用记录</div>
					
				</div>
				
				<div id="dinp" style="display: flex;visibility: hidden;height: 0;margin-top: 20px;">
				<!--	<div class="layui-inline">
					      <label class="layui-form-label">请选择范围</label>
					      <div class="layui-input-inline">
					        <input type="text" class="layui-input" id="test16" placeholder="开始 到 结束" onchange="d()">
					      </div>
					</div>-->
					<input type="text" class="layui-input" id="test1" style="width: 200px" placeholder="开始日期" onfocusout="update()">
					~
					<input type="text" class="layui-input" id="test2" style="width: 200px" placeholder="结束日期" onfocusout="update()">
					<button style="margin-left: 400px;width: 100px;background-color: #fff;border-radius: 5px; border: 1px solid #0000ad;cursor: pointer;">导出Excel</button>
				
				</div>
				<div id="myInterface" class="custom-div-act" style="margin-top: 0;">
					<table id="mInter" class="layui-table" lay-even  >
					  <colgroup>
					    <col width="180">
					    <col width="150">
					    <col width="150"> <col width="150"> <col width="150"> <col width="200"> <col width="150">
					  </colgroup>
					  <thead>
					    <tr>
					      <th>接口名称</th>
					      <th>可调用次数/天</th>
					      <th>可调用总次数</th>
						  <th>已调用次数</th>
						  <th>剩余次数</th>
						  <th>过期时间</th>
						  <th>操作</th>
					    </tr> 
					  </thead>
					  
					</table>
				</div>
				<div id="applyRecord" class="custom-div-act" style="visibility: hidden;">
					<table id="apRe" class="layui-table" lay-even  >
					  <colgroup>
					    <col width="700">
					    <col width="180">
					    <col width="150"> <col width="150"> 
					  </colgroup>
					  <thead>
					    <tr>
					      <th>申请的接口</th>
					      <th>申请时间</th>
					      <th>审核状态</th>
						  <th>操作</th>
					    </tr> 
					  </thead>
					  
					</table>
				</div>
				
				<div id="useRecord" style="custom-div-act" style="visibility: hidden;">
					<table id="usRe" class="layui-table" lay-even  style="width: 80%">
					  <colgroup>
					    <col width="250">
					    <col width="500">
					    <col width="150">  
					  </colgroup>
					  <thead>
					    <tr>
					      <th>调用时间</th>
					      <th>调用的接口</th>
					      <th>调用状态</th>
					    </tr> 
					  </thead>
					  
					</table>
				</div>
			</div>
		</div>
		
		<!--div id="footer" style="line-height: 20px; z-index: 999;">
			<p>社会信用体系建设部际联席会议成员单位新华社指导|陕西炬云金融科技有限公司主办</p>
			<p>版权所有陕西炬云金融科技有限公司</p>
		</div--> 
	</body>
</html>

<script>
	//复制内容
	function copyText(){
	  var text = document.getElementById("text").innerText;
	  var input = document.getElementById("input");
	  input.value = text; // 修改文本框的内容
	  input.select(); // 选中文本
	  document.execCommand("copy"); // 执行浏览器复制命令
	  alert("复制成功");
	}
</script>
<script>
	(function() {
		var oList = document.querySelectorAll('.list h2'),
			oHide = document.querySelectorAll('.hide'),
			oIcon = document.querySelectorAll('.list i'),
			lastIndex = 0;
		for (var i = 0; i < oList.length; i++) {
			oList[i].index = i; //自定义属性
			oList[i].isClick = false;
			oList[i].initHeight = oHide[i].clientHeight;
			oHide[i].style.height = '0';
			oList[i].onclick = function() {
				if (this.isClick) {
					oHide[this.index].style.height = '0';
					oIcon[this.index].className = '';
					oList[this.index].className = '';
					oList[this.index].isClick = false;
				} else {
					/*这几行是实现手风琴的*/
					/*oHide[lastIndex].style.height = '0';
					oIcon[lastIndex].className = '';
					oList[lastIndex].className = '';*/
					oHide[this.index].style.height = '220px';
					oIcon[this.index].className = 'on';
					oList[this.index].className = 'on';
					oList[lastIndex].isClick = false;
					oList[this.index].isClick = true;
					lastIndex = this.index;
				}
			}
		}
	})();
</script>
<script type="text/javascript">
			var url = "http://116.62.175.87:5000/user/show";
			var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNTk1MzEyMjEyLCJleHAiOjE1OTgzMTIyMTJ9.17gc9AN8N-3Q87bo0xmQ64Qne43UiABJhMa6D_Z_mh_g1wZkQIWN1tu1gbKJcY7CJmTVvkhQkPfb1DvhHVAnew";
			    $.ajax({
					headers: {"Authorization": token},
			        type: "GET",
			        url: url,
					datatype: "json",
			        success: function(data) {//data是一个JSON对象
						console.log(data);
						if(data.code=='200'){
							var newData = JSON.stringify(data.data);//将JSON对象转换为字符串
							//alert(newData);
							newData = eval("("+newData+")");//把JSON字符串解析为javascript对象
							//alert("phone: "+newData.phone);
							document.getElementById("userId").innerText = newData.name;
							document.getElementById("appKey").innerText = newData.appKey;
							document.getElementById("appSecret").innerText = newData.appSecret;
							document.getElementById("AESSecret").innerText = newData.aesSecret;
							//document.getElementById("userName").innerText = newData.name;
						}
			        },
					error: function(data) {
						alert("failed");
						console.log(data);
					}
			    });
				
			function exit(){//这个肯定要改！！！
				token = "";
			}
		</script>

<script>
	/*layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  laydate.render({
	      elem: '#test16'
	      ,type: 'datetime'
	      ,range: '到'
	      ,format: 'yyyy年M月d日H时m分s秒',
		  trigger: 'click' //采用click弹出
	    });
	});*/
	
	//用来写日期那块的
layui.use('laydate', function(){
  var laydate1 = layui.laydate;
  
  //执行一个laydate实例
  laydate1.render({
    elem: '#test1' ,//指定元素
	trigger: 'click' //采用click弹出
  });
  var laydate2 = layui.laydate;
  
  //执行一个laydate实例
  laydate2.render({
    elem: '#test2' ,//指定元素
	trigger: 'click' //采用click弹出
  });
});

</script>
<script type="text/javascript">
	//我使用的接口，第一张表
	var interfaceUrl = "http://116.62.175.87:5000/interface/myInterface";
	var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNTk1MzEyMjEyLCJleHAiOjE1OTgzMTIyMTJ9.17gc9AN8N-3Q87bo0xmQ64Qne43UiABJhMa6D_Z_mh_g1wZkQIWN1tu1gbKJcY7CJmTVvkhQkPfb1DvhHVAnew";
	var params = JSON.stringify({
		"pageNum": 1,
		"pageSize": 20
	});
	$.ajax({
		headers: {"Authorization": token},
		url: interfaceUrl,
		type: "POST",
		datatype: "JSON",
		contentType: "application/json",
		data: params,
		success: function(data){
			console.log("success 1");
			console.log(data);
			if(data.code=='200'){
				var arr = new Array();
				for(var i=0;i<data.data.rows.length;i++){
					arr[i] = data.data.rows[i];
				}
				if(arr.length>0){
					for(var i=0; i<arr.length; i++){
						var tr = document.createElement("tr");
						var td = document.createElement("td");//新建一个元素节点td 
						var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var td4 = document.createElement("td");
						var td5 = document.createElement("td"); var td6 = document.createElement("td"); //td6是“操作”，留给按钮的
						var node = document.createTextNode(arr[i].interfaceName); 
						td.appendChild(node); //接口名
						node = document.createTextNode(arr[i].countPerDay);  td1.appendChild(node);//每天可调用次数
						node = document.createTextNode(arr[i].countTotal);   td2.appendChild(node);//可调用总次数
						node = document.createTextNode(arr[i].usedCount);    td3.appendChild(node); //已调用次数
						node = document.createTextNode(arr[i].countTotal-arr[i].usedCount);   td4.appendChild(node);//剩余次数
						node = document.createTextNode(arr[i].expireTime);   td5.appendChild(node); //过期时间
						node = document.createTextNode("查看");  td6.appendChild(node);//操作按钮，要改！！
						tr.appendChild(td); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5);  tr.appendChild(td6);  
						document.getElementById("mInter").appendChild(tr);
						var detail = arr[i];
						td6.onclick = function(){show(detail);
						// changeBack();
						 };
					}
				}else{
					var tr = document.createElement("tr");
					var node = document.createTextNode("暂无数据");
					tr.appendChild(node);
					document.getElementById("mInter").appendChild(tr);
				}
			}
		},
		error: function(data){
			console.log("failed 1");
			console.log(data);
		}
	});
	function show(ele){
		var tr1 = document.createElement("tr");
		var td_1 = document.createElement("td"); var td_2 = document.createElement("td"); var td_3 = document.createElement("td"); var td_4 = document.createElement("td"); var td_5 = document.createElement("td"); 
		var node1 = document.createTextNode(ele.createTime);  td_1.appendChild(node1);//申请时间 
		node1 = document.createTextNode(ele.interfaceLevel);  td_2.appendChild(node1);//接口等级
		node1 = document.createTextNode(ele.countPerDay);     td_3.appendChild(node1);  //可调用次数/天
		node1 = document.createTextNode(ele.countTotal);      td_4.appendChild(node1);//可调用总次数
		node1 = document.createTextNode(ele.expireTime);      td_5.appendChild(node1);//过期时间
		tr1.appendChild(td_1); tr1.appendChild(td_2); tr1.appendChild(td_3); tr1.appendChild(td_4); tr1.appendChild(td_5);
		document.getElementById("detail").appendChild(tr1);
		document.getElementById("interfaceName").innerText = ele.interfaceName;
		var modal = document.getElementById('myModal');
		modal.style.display = "block";
	}
	function show_close(){//弹框关闭且可以反复查看
		var modal = document.getElementById('myModal');
		modal.style.display = "none";
	}
	function changeBack(){
		var h = document.getElementById("back").style.height;
		console.log(h);
	}
</script>
<script type="text/javascript">
	//申请记录，第二张表
	var interfaceUrl1 = "http://116.62.175.87:5000/interface/applyRecords";
	var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNTk1MzEyMjEyLCJleHAiOjE1OTgzMTIyMTJ9.17gc9AN8N-3Q87bo0xmQ64Qne43UiABJhMa6D_Z_mh_g1wZkQIWN1tu1gbKJcY7CJmTVvkhQkPfb1DvhHVAnew";
	var params = JSON.stringify({
		"pageNum": 1,
		"pageSize": 20
	});
	$.ajax({
		headers: {"Authorization": token},
		url: interfaceUrl1,
		type: "POST",
		datatype: "JSON",
		contentType: "application/json",
		data: params,
		success: function(data){
			console.log("success 2");
			console.log(data);
			if(data.code=='200'){
				var arr = new Array();
				for(var i=0;i<data.data.rows.length;i++){
					arr[i] = data.data.rows[i];
				}
				if(arr.length>0){
					for(var i=0; i<arr.length; i++){
						var tr = document.createElement("tr");
						var td = document.createElement("td");//新建一个元素节点td
						var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td");//td3是“操作”，留给按钮的
						var node = document.createTextNode(arr[i].interfaceNames); 
						td.appendChild(node); //接口名
						node = document.createTextNode(arr[i].createTime);  td1.appendChild(node);//申请时间
						if(arr[i].status=='1'){
							node = document.createTextNode("已通过");   td2.appendChild(node);//审核状态
							node = document.createTextNode("");  td3.appendChild(node);//操作按钮，要改！！
						}else{
							node = document.createTextNode("待审核");   td2.appendChild(node);//审核状态
							node = document.createTextNode("删除");  td3.appendChild(node);//操作按钮，要改！！
						}
						tr.appendChild(td); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3);   
						document.getElementById("apRe").appendChild(tr);
						var detail = arr[i];
						td3.onclick = function(){Delete(detail);
						// changeBack();
						 };
					}
				}else{
					
				}
			}
		},
		error: function(data){
			console.log("failed 2");
			console.log(data);
		}
	});
	function Delete(ele){//要改！！！
		var tr1 = document.createElement("tr");
		var td_1 = document.createElement("td"); var td_2 = document.createElement("td"); var td_3 = document.createElement("td"); var td_4 = document.createElement("td"); var td_5 = document.createElement("td"); 
		var node1 = document.createTextNode(ele.createTime);  td_1.appendChild(node1);//申请时间 
		node1 = document.createTextNode(ele.interfaceLevel);  td_2.appendChild(node1);//接口等级
		node1 = document.createTextNode(ele.countPerDay);     td_3.appendChild(node1);  //可调用次数/天
		node1 = document.createTextNode(ele.countTotal);      td_4.appendChild(node1);//可调用总次数
		node1 = document.createTextNode(ele.expireTime);      td_5.appendChild(node1);//过期时间
		tr1.appendChild(td_1); tr1.appendChild(td_2); tr1.appendChild(td_3); tr1.appendChild(td_4); tr1.appendChild(td_5);
		document.getElementById("detail").appendChild(tr1);
		document.getElementById("interfaceName").innerText = ele.interfaceName;
		var modal = document.getElementById('myModal');
		modal.style.display = "block";
	}
	
</script>
<script type="text/javascript">
	function update(){ 
	//调用记录，第三张表
//	var startTime = document.getElementById("test1").value;
//	console.log("start  "+startTime);
//	console.log("start1  "+document.getElementById("test1").timeStamp);
//	var endTime = document.getElementById("test2").value;
//	console.log("end   "+endTime);
	var interfaceUrl2 = "http://116.62.175.87:5000/interface/callRecords";
	var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNTk1MzEyMjEyLCJleHAiOjE1OTgzMTIyMTJ9.17gc9AN8N-3Q87bo0xmQ64Qne43UiABJhMa6D_Z_mh_g1wZkQIWN1tu1gbKJcY7CJmTVvkhQkPfb1DvhHVAnew";
	var params = JSON.stringify({
		"pageNum": 1,
		"pageSize": 20,
		"startTime": document.getElementById("test1").timeStamp,
		"endTime": document.getElementById("test2").timeStamp
	});
	$.ajax({
		headers: {"Authorization": token},
		url: interfaceUrl2,
		type: "POST",
		datatype: "JSON",
		contentType: "application/json",
		data: params,
		success: function(data){
			console.log("success 3");
			console.log(data);
			if(data.code=='200'){
				var arr = new Array();
				for(var i=0;i<data.data.rows.length;i++){
					arr[i] = data.data.rows[i];
				}
				if(arr.length>0){
					for(var i=0; i<arr.length; i++){
						var tr = document.createElement("tr");
						var td = document.createElement("td");//新建一个元素节点td 
						var td1 = document.createElement("td"); var td2 = document.createElement("td");//td2
						var node = document.createTextNode(arr[i].createTime); 
						td.appendChild(node); //调用时间
						node = document.createTextNode(arr[i].interfaceName);  td1.appendChild(node);//调用接口
						node = document.createTextNode("成功");   td2.appendChild(node);//调用状态
						tr.appendChild(td); tr.appendChild(td1); tr.appendChild(td2);  
						document.getElementById("usRe").appendChild(tr);
						// changeBack();
					}
				}else{
					
				}
			}
		},
		error: function(data){
			console.log("failed 3");
			console.log(data);
		}
	});
	}
</script>
<!--script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#mInter'
    ,height: 90
    ,url: 'http://116.62.175.87:5000/interface/myInterface' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'interfaceName', title: '接口名称', width:162, fixed: 'left'}
	  // field设定字段名，后端用啥我用啥
      ,{field: 'countPerDay', title: '可调用次数/天', width:142}
      ,{field: 'countTotal', title: '可调用总次数', width:142}
      ,{field: 'usedCount', title: '已调用次数', width:100} 
      ,{field: 'lastTimes', title: '剩余次数', width: 98}
      ,{field: 'expireTime', title: '过期时间', width: 180}
      ,{field: 'operation', title: '操作', width: 140}
      // ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
	table.render({
	  elem: '#apRe'
	  ,height: 90
	  ,url: 'http://116.62.175.87:5000/interface/myInterface' //数据接口
	  ,page: true //开启分页
	  ,cols: [[ //表头
	    {field: 'applyInterface', title: '申请的接口', width:500, fixed: 'left'}
		  // field设定字段名，后端用啥我用啥
	    ,{field: 'createTime', title: '申请时间', width:180}
	    ,{field: 'status', title: '审核状态', width:130}
	 //   ,{field: 'operation', title: '操作', width:108} 
	  ]]
	});
	table.render({
	  elem: '#usRe',
	  height: 90,
	  url: 'http://116.62.175.87:5000/interface/myInterface', //数据接口
	  page: true ,//开启分页
	  cols: [[ //表头
	    {field: 'createTime', title: '调用时间', width:'20%', fixed: 'left'}
		  // field设定字段名，后端用啥我用啥
	    ,{field: 'interfaceId', title: '调用的接口', width:'50%'}
	    ,{field: 'status', title: '调用状态', width:'28%'}
	  ]]
	});
});
</script-->
<script>
	// 切换表格
	function toMyInter() {
		
		var div1 = document.getElementById("first");
		var div2 = document.getElementById("second");
		var div3 = document.getElementById("third");
		div1.style.borderBottom = "2px solid #277fd2";
		div2.style.borderBottom = "";
		div3.style.borderBottom = "";
		
		document.getElementById("myInterface").style.visibility='visible';
		document.getElementById("applyRecord").style.visibility='hidden';
		document.getElementById("useRecord").style.visibility='hidden';
		document.getElementById("dinp").style.height='0';
		// document.getElementById("dinp").style.marginLeft='20px';
		document.getElementById("dinp").style.visibility='hidden';
	}
	function toApplyInter() {
		var div1 = document.getElementById("first");
		var div2 = document.getElementById("second");
		var div3 = document.getElementById("third");
		div2.style.borderBottom = "2px solid #277fd2";
		div1.style.borderBottom = "";
		div3.style.borderBottom = "";
		document.getElementById("applyRecord").style.visibility='visible';
		document.getElementById("myInterface").style.visibility='hidden';
		document.getElementById("useRecord").style.visibility='hidden';
		document.getElementById("dinp").style.height='0';
		// document.getElementById("dinp").style.marginLeft='20px';
		document.getElementById("dinp").style.visibility='hidden';
	}
	function toUseInter() {
		// var divin=document.getElementById("dinp");
		var div1 = document.getElementById("first");
		var div2 = document.getElementById("second");
		var div3 = document.getElementById("third");
		div3.style.borderBottom = "2px solid #277fd2";
		div1.style.borderBottom = "";
		div2.style.borderBottom = "";
		document.getElementById("useRecord").style.visibility='visible';
		document.getElementById("applyRecord").style.visibility='hidden';
		document.getElementById("myInterface").style.visibility='hidden';
		document.getElementById("dinp").style.height='auto';
		// document.getElementById("dinp").style.marginLeft='20px';
		document.getElementById("dinp").style.visibility='visible';
		
	}
</script>

<script>
	layui.use('element', function() {
		var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
		element.init();
	});
</script>

<script>
	
	! function() {
		//无需再执行layui.use()方法加载模块，直接使用即可
		var form = layui.form,
			layer = layui.layer;
		//…
	}();

//	document.getElementById("main-container").style.height = document.body.scrollHeight + 'px';
</script>

</body>
</html>
